<template>
  <div class="vip">
    <el-row>
      <el-col :span="2"> 会员手机 </el-col>
      <el-col :span="4">
        <el-input :inline="true" v-model="phone" maxlength="11"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button @click="selsectByPhone" type="warning" plain
          >查询会员</el-button
        >
        <el-button @click="addVip" type="danger" plain>新增会员</el-button>
        <el-button @click="selectALLAgain" plain type="primary">重置</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="elTableData"
      border
      stripe
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' ,
      background:'#DEE1E6',
      color: 'black',}"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="id" label="会员id" width="180"> </el-table-column>
      <el-table-column prop="vip_discount" label="会员折扣系数" width="180">
      </el-table-column>
      <el-table-column prop="vip_name" label="会员姓名"> </el-table-column>
      <el-table-column prop="vip_phone" label="会员电话"> </el-table-column>
      <el-table-column prop="vip_total_consume" label="会员总消费金额">
      </el-table-column>
      <el-table-column width="400px" prop="address" label="修改信息">
        <template slot-scope="scope">
          <el-button type="warning" @click="updateVip(scope.row)" plain
            >修改会员</el-button
          >
          <el-button @click="delVip(scope.row)" type="danger" plain
            >删除会员</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 70%; float: left; text-align: center">
      <el-pagination
        :current-page="elPage"
        @current-change="elchangePage"
        :page-size="3"
        layout="prev, pager, next"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
    <ylDialog
      title="修改会员"
      :state="dialogFormVisible"
      :data="form"
      @noSubmit="backPrePage"
      @xuanran="getVipData"
    ></ylDialog>

    <ylDialog
      title="添加会员"
      :state="addtankuang"
      :data="form"
      @noSubmit="backPrePage"
      @xuanran="getVipData"
    ></ylDialog>
  </div>
</template>

<script>
import * as api from "../utils/api";
import ylDialog from "../components/ylDialog";
export default {
  name: "vip",
  components: { ylDialog },
  computed: {
    elTableData() {
      let start = (this.elPage - 1) * 3;
      let end = (this.elPage - 1) * 3 + 3;
      return this.tableData.slice(start, end);
    },
  },
  data() {
    return {
      input: "",
      tableData: [],
      phone: "",
      plain: "true",
      elPage: 1,
      formLabelWidth: "120px",
      dialogFormVisible: false,
      addtankuang: false,
      updatetankuang: false,
      form: {
        id: "",
        vip_name: "",
        vip_phone: "",
        vip_discount: "",
        vip_total_consume: "",
      },
    };
  },
  created() {
    this.getVipData();
  },
  methods: {
    getVipData() {
      this.axios({
        url: api.SELECT_ALLMEMBERVIP,
        method: "get",
      }).then((data) => {
        //   console.log(data);
        this.phone = "";
        this.tableData = data.data.data;
      });
    },

    // 通过电话查询会员   通过双向绑定给input绑定一个值（phone） 再将查询的结果渲染到表格
    selsectByPhone() {
      //   console.log(this.phone);
      this.axios({
        method: "get",
        url: api.SELECT_MEMBERVIP_BYPHONE,
        params: { phone: this.phone },
      }).then((data) => {
        if (data.data.data.length) {
          this.tableData = data.data.data;
          //   console.log(data);
        } else {
          this.$message.error("错了哦，没有该会员哟");
        }
      });
    },
    // 重置的方法：  重新查询一次会员 将input的值清除
    selectALLAgain() {
      this.axios({
        url: api.SELECT_ALLMEMBERVIP,
        method: "get",
      }).then((data) => {
        console.log(data);
        this.phone = "";
        console.log(this.phone);
        this.tableData = data.data.data;
      });
    },
    elchangePage(val) {
      // console.log(val)
      this.elPage = val;
    },
    // 增加会员
    addVip() {
      this.addtankuang = true;
    },
    backPrePage(propsName) {
      this[propsName] = false;
    },
    delVip(item) {
      this.$confirm("是否确认删除？注意不可恢复", "确认删除", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认删除",
        cancelButtonText: "放弃删除",
      }).then(() => {
        this.axios({
          method: "post",
          url: api.DELETEMEMBERVIPBYID,
          data: { id: item.id },
        }).then((data) => {
          if (data.data.code === 200) {
            this.$message({
              type: "info",
              message: "删除成功",
            });
            this.getVipData();
          } else {
            this.$message({
              type: "info",
              message: "删除失败",
            });
          }
        });
      });
    },
    updateVip(item) {
      this.dialogFormVisible = true;
      this.form.id = item.id;
      this.form.vip_name = item.vip_name;
      this.form.vip_phone = item.vip_phone;
      this.form.vip_discount = item.vip_discount;
      this.form.vip_total_consume = item.vip_total_consume;
    },
  },
};
</script>

<style scoped lang='less'>
input .el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-col,
.el-col-2 {
  line-height: 40px;
  font-size: 16px;
}
</style>

